import React, { Component } from "react";

class App extends Component {
  state = {
    count: 10,
    msg: "hello",
    show: true,
  };

  handleClick() {
    // 如果想改变state，在react里面需要使用setState方法
    // setState里面有两个参数
    // 第一个参数可以是对象, 第二个参数是回调函数，是在改变以后执行
    // this.setState(
    //   {
    //     count: 20,
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
    // 第一个参数还可以是函数,函数可以接收一个参数prevState, 第二个参数还是回调函数
    // 当改变以后的值要前一次值的时候，推荐使用函数，否则使用对象
    // this.setState(
    //   (prevState) => ({
    //     show: !prevState.show,
    //   }),
    //   () => {
    //     console.log(this.state.show);
    //   }
    // );
    // setState在合成事件中是异步的
    // setState在生命周期中是异步的
    // setState在定时器里面是同步的
    // setState在js原生事件里面是同步的
  }

  render() {
    return (
      <>
        <h3>setState</h3>
        {this.state.show && <p>{this.state.msg}</p>}
        <p>{this.state.count}</p>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button>btn</button>
      </>
    );
  }

  componentDidMount() {
    // setTimeout(() => {
    //   this.setState({
    //     count: 20,
    //   });
    //   console.log(this.state.count);
    // }, 2000);

    document.querySelector("button").addEventListener("click", () => {
      this.setState({
        count: 20,
      });
      console.log(this.state.count);
    });
  }
}

export default App;
